/**
 *通用形列表-查询部分
 */
<template>
    <el-form 
        v-if="formArr.length > 0"
        ref="formRef"
        :model="formDataNew" 
        :rules="rules"
        label-width="auto"
        inline
        :show-message="false"
        status-icon
        class="myElForm"
    >
        <template
            v-for="(item1, index1) in formArr"
            :key="`0-${index1}`"
        >
            <el-form-item
                v-if="index1 < isFoldNum || !isFoldFlag"
                :label="item1.fieldText"
                :prop="item1.fieldName"
            >
                <el-input 
                    v-if="item1.fieldType=='input'"
                    v-model="formDataNew[item1.fieldName]" 
                    :type="item1.inputType"
                    :maxlength="item1.inputMaxLength"
                    :disabled="item1.fieldDisabled"
                    :placeholder="`请输入${item1.fieldText}`"
                    clearable
                    class="my-input"
                />
                <GeneralSelect
                    v-else-if="item1.fieldType=='select'"
                    v-model="formDataNew[item1.fieldName]"
                    :multiple="item1.selectmultiple"
                    :multipleLimit="item1.selectMultipleLimit"
                    :collapseTags="item1.selectCollapseTags"
                    :collapseTagsTooltip="item1.selectcollapseTagsTooltip"
                    :placeholder="`请选择${item1.fieldText}`"
                    clearable
                    :disabled="item1.fieldDisabled"
                    noDataText="暂无选项"
                    class="my-select"
                    :options="item1.selectOptions"
                    :dictionary="item1.selectDictionary"
                    :defalutOptionsIndex="item1.selectDefalutOptionsIndex"
                />
                <!-- <el-select
                    v-else-if="item1.fieldType=='select'"
                    v-model="formDataNew[item1.fieldName]"
                    :multiple="item1.selectmultiple"
                    :multiple-limit="item1.selectMultipleLimit"
                    :collapse-tags="item1.selectmultiple"
                    :collapse-tags-tooltip="item1.selectmultiple"
                    :placeholder="`请选择${item1.fieldText}`"
                    clearable
                    :disabled="item1.fieldDisabled"
                    no-data-text="暂无选项"
                    class="my-select"
                >
                    <el-option
                        v-for="item2 in item1.selectOptions"
                        :key="`1-${index1}`"
                        :label="item2.label"
                        :value="item2.value"
                        :disabled="item2.disabled"
                    />
                </el-select> -->
                <el-date-picker
                    v-else-if="item1.fieldType=='date'"
                    v-model="formDataNew[item1.fieldName]"
                    :type="item1.dateType"
                    :value-format="item1.dateValueFormat"
                    :default-value="item1.dateDefaultValue"
                    :disabled-date="item1.dateDisabledDate"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    :disabled="item1.fieldDisabled"
                    :placeholder="`请选择${item1.fieldText}`"
                    class="my-date-picker"
                />
                <!-- cascader级联选择 -->
                <el-cascader
                    v-else-if="item1.fieldType=='cascader'"
                    v-model="formDataNew[item1.fieldName]"
                    :options="item1.cascaderOptions"
                    :props="item1.cascaderProps"
                    :show-all-levels="item1.cascaderShowAllLevels"
                    :collapse-tags="item1.cascaderCollapseTags"
                    :collapse-tags-tooltip="item1.cascaderCollapseTagsTooltip"
                    :max-collapse-tags="item1.cascaderMaxCollapseTags"
                    :filterable="item1.cascaderFilterable"
                    clearable
                    :disabled="item1.fieldDisabled"
                    :placeholder="`请选择${item1.fieldText}`"
                    class="my-cascader"
                />
                <AdministrativeDivisionsCascader 
                    v-else-if="item1.fieldType=='administrativeDivisionsCascader'" 
                    v-model="formDataNew[item1.fieldName]" 
                    :disabled="item1.fieldDisabled"
                />
            </el-form-item>
        </template>
        
        <el-form-item>
            <el-button 
                type="primary" 
                :icon="Search"
                @click="onSubmit(formRef)"
            >
                查询
            </el-button>
        </el-form-item>
        <el-form-item>
            <el-button 
                type="info" 
                :icon="RefreshRight"
                @click="onReset(formRef)"
            >
                重置
            </el-button>
        </el-form-item>
        <el-form-item
            v-if="isFoldFlag && isFoldNum < formArr.length"
        >
            <el-button 
                type="primary" 
                link
                :icon="CaretBottom"
                @click="isFoldFlag = !isFoldFlag"
            >
                展开
            </el-button>
        </el-form-item>
        <el-form-item
            v-else-if="!isFoldFlag && isFoldNum < formArr.length"
        >
            <el-button 
                type="primary" 
                link
                :icon="CaretTop"
                @click="isFoldFlag = !isFoldFlag"
            >
                折叠
            </el-button>
        </el-form-item>
        <!-- <el-form-item>
            <el-button 
                type="primary" 
                @click=""
            >
                新增
            </el-button>
        </el-form-item>
        <el-form-item>
            <el-button 
                type="primary" 
                @click=""
            >
                导出
            </el-button>
        </el-form-item> -->
    </el-form>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import {  } from '@/apis'
    import { isPhone, deepClone } from '@/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        CaretTop,
        CaretBottom,
    } from '@element-plus/icons-vue'
    import AdministrativeDivisionsCascader from '@/components/administrativeDivisionsCascader/AdministrativeDivisionsCascader.vue'
    import GeneralSelect from '@/components/generalSelect/GeneralSelect.vue'

    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    
    const formRef = ref<any>()
    const rules = ref<any>({
        // account: [
        //     { 
        //         required: true, 
        //         message: '请输入账号！', 
        //         trigger: 'blur' 
        //     },
        // ],
        // password: [
        //     { 
        //         required: true, 
        //         message: '请输入密码！', 
        //         trigger: 'blur' 
        //     },
        // ]
    })
    const isFoldFlag = ref<boolean>(true) //折叠 / 展开
    
    const formArr = defineModel<any>('formArr', {
        required: false,
        default: [
            
        ]
    })
    const formDataNew = defineModel<any>('formDataNew', {
        required: false,
        default: {}
    })
    const formDataOriginal = defineModel<any>('formDataOriginal', {
        required: false,
        default: {}
    })
    const isFoldNum = defineModel<number>('isFoldNum', {
        required: false,
        default: 20
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        'tabelSearch': [data: any]
    }>()
    
    watch(() => formArr, (nVal, oVal) => {
        // console.log(nVal.value)
        let formObj = {}
        let formRules = {}
        nVal.value.forEach((item, index) => {
            formObj[item.fieldName] = item.fieldValue
            formRules[item.fieldName] = item.fieldRules
        })
        formDataNew.value = formObj
        // formDataOriginal.value = JSON.parse(JSON.stringify(formObj))
        formDataOriginal.value = deepClone(formObj)
        
        rules.value = formRules
    }, {
        immediate: true,
        deep: true
    })
    
    
    const onSubmit = async (formEl: any) => {
        if (!formEl) return;
        // try {
        //     let res = await formEl.validate()
        //     console.log(res)
            
        // } catch (err) {
        //     console.log(err)
            
        // }
        formEl.validate((valid, fields) => {
            // console.log(valid)
            // console.log(fields)
            if (valid) {
                // formDataOriginal.value = JSON.parse(JSON.stringify(formDataNew.value))
                formDataOriginal.value = deepClone(formDataNew.value)
            // console.log(deepClone(formDataNew.value))
            // console.log(JSON.parse(JSON.stringify(formDataNew.value)))


                emits('tabelSearch', formDataOriginal.value)
            } else {
                ElMessage({
                    message: fields[Object.keys(fields)[0]][0].message,
                    type: 'warning',
                })
            }
        })
    }
    const onReset = (formEl: any) => {
        formEl.resetFields()
        let formObj = {}
        formArr.value.forEach((item, index) => {
            formObj[item.fieldName] = item.fieldValue
        })
        formDataNew.value = formObj
        console.log(formDataNew.value)
    }
</script>

<style lang="scss" scoped>
    .myElForm {
        max-height: 200px;
        overflow-y: auto;
        text-align: left;
        // label文字垂直居中
        :deep(.el-form-item__label-wrap) {
            align-items: center;
        }
    }
    // 输入框长度
    :deep(.my-input .el-input__wrapper) {
        box-sizing: border-box;
        width: 240px;
    }
    // 选择框长度
    .my-select {
        width: 240px;
    }
    // 日期
    :deep(.my-date-picker) {
        box-sizing: border-box;
        width: 240px;
    }
    // 多级选项
    :deep(.my-cascader) {
        box-sizing: border-box;
        width: 240px;
    }
</style>